import './index.less';
import React from 'react';
import { DatePicker, Row, Col, Input, Button, List } from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { createHashHistory } from 'history';

const { RangePicker } = DatePicker;
const ListItem = List.Item;
const { Meta } = List.Item;
const history = createHashHistory();

export default class Daily extends React.Component {
    constructor(props) {
        super(props);
        this.str = '1.配合测试；2.学习JavaScript数据结构与算法1.配合测试；2.学习JavaScript数据结构与算法1.配合测试；2.学习JavaScript数据结构与算法1.配合测试；2.学习JavaScript数据结构与算法1.配合测试；2.学习JavaScript数据结构与算法1.配合测试；2.学习JavaScript数据结构与算法1.配合测试；2.学习JavaScript数据结构与算法1.配合测试；2.学习JavaScript数据结构与算法';
        this.state = {
            dataSource: [
                { date: '20200427', day: '周一', summary: this.str },
                { date: '20200428', day: '周二', summary: this.str },
                { date: '20200429', day: '周三', summary: this.str },
                { date: '20200430', day: '周四', summary: this.str },
                { date: '20200501', day: '周五', summary: this.str },
                { date: '20200502', day: '周六', summary: this.str },
                { date: '20200503', day: '周日', summary: this.str },
                { date: '20200504', day: '周一', summary: this.str },
                { date: '20200505', day: '周二', summary: this.str },
                { date: '20200506', day: '周三', summary: this.str },
            ],
            pagination: { current: 1, pageSize: 10, total: 16, onChange: (page) => this.queryList(page) }
        };
    }

    queryList(pageIndex) { // 查询表格数据
        let { pagination } = this.state;
        this.setState({
            dataSource: [
                { date: '20200507', day: '周四', summary: this.str },
                { date: '20200508', day: '周五', summary: this.str },
                { date: '20200509', day: '周六', summary: this.str },
                { date: '20200510', day: '周日', summary: this.str },
                { date: '20200511', day: '周一', summary: this.str },
                { date: '20200512', day: '周二', summary: this.str }
            ],
            pagination: { ...pagination, current: pageIndex }
        });
    }

    displayMore(item) { // 显示全部
        let { dataSource } = this.state;
        for (let d of dataSource) {
            if (item.date === d.date) {
                d.more = !d.more;
            }
        }
        this.setState({ dataSource });
    }

    openUrl(src) { // 跳转链接
        // history.push(url);
        this.props.addBread(src);
    }

    renderListItem(type, item) { // 渲染列表子项
        switch (type) {
            case 'title':
                return (
                    <div>
                        <span className="mr-20 ft-16">{item.date}</span>
                        <span className="ft-16">{item.day}</span>
                    </div>
                )
            case 'desc':
                return (
                    <div className={`${item.more ? '' : 'line-ellipsis'}`}
                        style={{ width: '600px' }}
                    >
                        {item.summary}
                    </div>
                );
            default:
                return '';
        }
    }

    render() {
        let { dataSource, pagination } = this.state;
        return (
            <div className="work-daily page">
                <Button onClick={() => this.openUrl('addDaily')} size="large" type="primary">
                    <PlusOutlined />
                    新增日志
                </Button>
                <Button className="ml-10" size="large">
                    <UploadOutlined />
                    批量导入
                </Button>
                <Row className="mt-10 mb-20">
                    <Col className="form-label-title" span={4}><span>日期范围：</span></Col>
                    <Col span={5}>
                        <RangePicker />
                    </Col>
                    <Col className="form-label-title" offset={1} span={4}><span>关键字：</span></Col>
                    <Col span={5}>
                        <Input />
                    </Col>
                    <Col offset={1}><Button type="primary">查询</Button></Col>
                </Row>
                <div className="w-80 mga mt-100">
                    <List pagination={pagination}>
                        {dataSource.length > 0 && dataSource.map(item => (
                            <ListItem key={item.date} actions={[
                                <a key="list-edit">编辑</a>,
                                <a key="list-more" onClick={() => this.displayMore(item)}>
                                    {item.more ? '收起' : '展开'}
                                </a>]}
                            >
                                <Meta description={this.renderListItem('desc', item)}
                                    title={this.renderListItem('title', item)}
                                />
                            </ListItem>
                        ))}
                    </List>
                </div>
            </div>
        );
    }
}
export { Daily };
